<template>
  <view class="recommend-container">
    <view class="recommend-header">
      <text class="title">为您推荐</text>
      <text class="subtitle">基于您的学习历史智能推荐</text>
    </view>
    
    <view class="course-list">
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="recommendations.length === 0" class="empty">
        暂无推荐课程，开始学习获取个性化推荐
      </view>
      <view 
        v-else
        v-for="(course, index) in recommendations" 
        :key="course.id"
        class="course-item"
        @tap="viewCourseDetail(course.id)"
      >
        <image class="course-image" :src="course.coverImage || 'http://101.200.154.121:19000/teacher-manage-static/static/default-course.png'"></image>
        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          <text class="course-desc">{{ course.description }}</text>
          <view class="course-meta">
            <text class="price">¥{{ course.price }}</text>
            <text class="match-score">匹配度 {{ course.matchScore }}%</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { recommendApi } from '@/api/recommend.js'

export default {
  data() {
    return {
      recommendations: [],
      loading: true
    }
  },
  
  onLoad() {
    this.getRecommendations()
  },
  
  methods: {
    async getRecommendations() {
      this.loading = true
      try {
        // 使用新的API结构
        const res = await recommendApi.getPersonalRecommend()
        if (res && res.code === 200) {
          this.recommendations = res.data || []
        }
      } catch (error) {
        console.error('获取推荐课程失败:', error)
        uni.showToast({
          title: '获取推荐失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    viewCourseDetail(courseId) {
      // 记录点击行为
      this.trackBehavior(courseId)
      
      // 跳转到课程详情
      uni.navigateTo({
        url: `/pages/teacher/detail?id=${courseId}`
      })
    },
    
    trackBehavior(courseId) {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo && userInfo.id) {
        try {
          console.log('记录用户行为:', 'click', courseId)
          // 这里暂时只记录日志，如需此功能请在recommendApi中添加相应方法
        } catch (err) {
          console.error('行为跟踪记录失败:', err)
        }
      }
    }
  }
}
</script>

<style>
.recommend-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.recommend-header {
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}

.loading, .empty {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.course-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.course-image {
  width: 200rpx;
  height: 200rpx;
  object-fit: cover;
}

.course-info {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.course-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.match-score {
  font-size: 24rpx;
  color: #ffb800;
  background-color: #FFF9E6;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}
</style> 